<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="padding:0px 16px 16px">
        <div v-if="systemMsg.length > 0" class="bs-sysMsg">
          <!-- <i class="el-alert__icon el-icon-warning" /> -->
          <div class="msg__content">
            <el-carousel height="20px" direction="vertical" indicator-position="none" :autoplay="true">
              <el-carousel-item v-for="item in systemMsg" :key="item.id">
                <button class="item" @click="showMsg(item.notice)">{{ item.notice }}</button>
                <!-- <a href="javascript:void(0)" class="item">{{ item.notice }}</a> -->
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="10" style="padding:0px 16px 16px">

        <div class="chart-wrapper">
          <recent />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8" style="padding:0px 16px">
        <ArkVoice badge="欧皇鉴定" :content="description" />
        <div class="chart-wrapper">
          <pie height="300px" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6" style="display: flex;justify-content: center;margin-top: 10px;">
        <div class="ark-tag-list">
          <div class="ark-tag-list__left">TO-DO LIST</div>
          <ArkTag icon="el-icon-upload" title="常用功能" content="官服数据导入" type="red" @click.native="to_url('/import/hypergryph')" />
          <ArkTag icon="el-icon-s-help" title="常用功能" content="卡池分析" type="orange" @click.native="to_url('/statistic/pool')" />
          <ArkTag icon="el-icon-notebook-1" title="其他功能" content="非酋排行榜" type="blue" @click.native="to_url('/other/ranking')" />
        </div>
      </el-col>
    </el-row>
    <el-row style="padding:16px 0 0;margin-bottom:30px;">
      <div class="chart-wrapper">
        <gachatable />
      </div>
    </el-row>

  </div>
</template>

<script>
import { ArkVoice, ArkTag } from '@/components/ArkUI'
import gachatable from './components/Table'
import pie from './components/Pie'
import recent from './components/recentTable'
import { mapGetters } from 'vuex'
import { appraisal } from '@/api/gacha'
import { getNotice } from '@/api/admin'

export default {
  name: 'Dashboard',
  components: {
    ArkTag,
    ArkVoice,
    gachatable,
    pie,
    recent
  },
  data() {
    return {
      num: '',
      status: '',
      description: '',
      notice: '文字说明文字说明文字说明文字说明文字说明文字说明',
      systemMsg: [
        { id: 1, title: '滚动公告1' },
        { id: 2, title: '滚动公告2' },
        { id: 3, title: '滚动公告3' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.appraisalStatus()
    this.notice_msg()
  },
  methods: {
    appraisalStatus() {
      appraisal().then(response => {
        this.description = '平均' + response.data.num.toFixed(1) + '发一个六星干员,鉴定为' + response.data.status
      })
    },
    notice_msg() {
      getNotice().then(response => {
        this.systemMsg = response.data.notice
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    showMsg(msg) { // 展示公告
      this.$alert(msg, '公告', {
        confirmButtonText: '确定'
      })
    },
    to_url(url) {
      this.$router.push({ path: url })
    }

  }
}

</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

/*轮翻消息*/
.bs-sysMsg {
    display: flex;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, .7);
    color: #fff;
    overflow: hidden;
    opacity: 1;
    align-items: center;
    transition: opacity .2s;
}
.bs-sysMsg .msg__content {
    display: table-cell;
    padding: 0 8px;
    width: 100%;
}
.bs-sysMsg .msg__content .item {
    color: #fff;
    font-size: 14px;
    opacity: 0.75;
}
.bs-sysMsg .msg__content button.item {
    border: none;
    background-color: rgba(0, 0, 0, 0);
}
// .bs-sysMsg .msg__content .item:hover{
//   text-decoration: underline;
.bs-sysMsg::before {
    content: "VOICE";
    background-color: rgba(255, 255, 255, .9);
    font-size: 10px;
    font-weight: 500;
    color: #000;
    position: absolute;
    width: 100px;
    padding: 0 5px;
    line-height: initial;
    top: -8px;
    margin-left: -12px;
}
// }
.chart-wrapper {
  background-color: #fdfdfb;
  opacity: .9;
}
.chart-wrapper::after {
    content: "";
    background-color: #ff5e19;
    opacity: .9;
    height: 6px;
    width: 310px;
    margin: -3px 0 0 floor(random(230))+px;
    position: absolute;
}
@media (max-width:1024px) {
  .chart-wrapper::after {
    content: "";
    background-color: #ff5e19;
    opacity: .9;
    height: 6px;
    width: 31px;
    margin: -3px 0 0 floor(random()*10)+px;
    position: absolute;
  }
}
</style>
